<template>
	<view>
		<view class="drop" v-show="clickShow">
			<view class="shape"></view>
			<view class="dropItem">
				<image src="../../static/tabimg/mima.png" class="imgCode"></image>
				<view @tap="changepass">修改密码</view>
			</view>
			<view class="dropItem">
				<image src="../../static/tabimg/tuichu.png" class="imgCode2"></image>
				<view @tap="close">退出应用</view>
			</view>
		</view>
		<!-- 主体 -->
		<view class="uni-tab-bar">
			<!-- 主体导航 -->
			<scroll-view class="uni-swiper-tab" @scroll="scroll" :scroll-left="scrollLeft">
				<view v-for="(item,index) in tabBars" :key="index" class="swiper-tab-list" :class="tabIndex==index ? 'active' : ''"
				 @click="tapTab" :data-current="index">{{item.name}}</view>
			</scroll-view>
			<swiper class="swiper" :current="tabIndex" :duration="300" @change="changeTab">
				<swiper-item class="listItem">
					<view class="Roughing">
						<swiper class="Roughingbox" indicator-dots="true" :duration="300" indicator-color="#C1C2C6"
						 indicator-active-color="#134199" @change="cuzhaChange">
							<swiper-item>
								<view class="itemhead">当前板坯信息显示</view>
								<view class="itemMain">
									<view class="itemMain-head">
										<view class="itembox">
											<view class="title">卷号</view>
											<view class="titleinfo">{{matid}}</view>
										</view>
										<view class="itembox" @tap="changematid">
											<view class="title">下一块</view>
											<view class="titleinfo">{{nextmatid}}</view>
										</view>
										<view class="itembox wd">
											<view class="title">钢种</view>
											<view class="titleinfo">{{steelGrade}}</view>
										</view>
									</view>
									<view class="itemMain-body">
										<view class="bodyitem midtitle"></view>
										<view class="bodyitem" v-for="(item,index) in slab" :key="index" :class="(index%2==0)?'' : 'addcol'">
											<view>{{item.name}}</view>
											<view class="titleinfo">{{item.num}}</view>
											<view class="titleunit">{{item.unit}}</view>
										</view>
									</view>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="itemhead">中间坯和成品信息</view>
								<view class="itemMain">
									<view class="itemMain-head">
										<view class="itembox">
											<view class="title">卷号</view>
											<view class="titleinfo">{{matid}}</view>
										</view>
										<view class="itembox">
											<view class="title">下一块</view>
											<view class="titleinfo">{{nextmatid}}</view>
										</view>
										<view class="itembox wd">
											<view class="title">钢种</view>
											<view class="titleinfo">{{steelGrade}}</view>
										</view>
									</view>
									<view class="itemMain-body scroll-Y">
										<view class="bodyitem midtitle">中间坯信息</view>
										<view class="bodyitem" v-for="(item,index) in midrow" :key="index" :class="(index%2==0)?'' : 'addcol'">
											<view>{{item.name}}</view>
											<view class="titleinfo">{{item.num}}</view>
											<view class="titleunit">{{item.unit}}</view>
										</view>
										<view class="longline"></view>
										<view class="bodyitem midtitle">成品信息</view>
										<view class="bodyitem" v-for="(item,index) in turnoff" :key="index" :class="(index%2==0)?'' : 'addcol'">
											<view>{{item.name}}</view>
											<view class="titleinfo">{{item.num}}</view>
											<view class="titleunit">{{item.unit}}</view>
										</view>
									</view>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="itemhead">轧机和中间坯实时信息</view>
								<view class="itemMain">
									<view class="itemMain-head">
										<view class="itembox">
											<view class="title">卷号</view>
											<view class="titleinfo">{{matid}}</view>
										</view>
										<view class="itembox">
											<view class="title">下一块</view>
											<view class="titleinfo">{{nextmatid}}</view>
										</view>
										<view class="itembox wd">
											<view class="title">钢种</view>
											<view class="titleinfo">{{steelGrade}}</view>
										</view>
									</view>
									<view class="itemMain-body scroll-Y">
										<view class="bodyitem midtitle"></view>
										<uni-collapse @change="change">
											<view v-for="(arr,i) in bar" :key="i">
												<uni-collapse-item :show-animation="true" :class="(i%2==0)?'' : 'addcol'" :animation="true" :title="arr.name"
												 :open="i===0?true:false">
													<view class="midbox">
														<view class="midbox-item" v-for="(item,index) in arr.data" :key="index">
															<view class="itemTitle">{{item.name}}</view>
															<view class="itemInfo">{{item.num}}</view>
														</view>
													</view>
												</uni-collapse-item>
											</view>
										</uni-collapse>
									</view>
								</view>
							</swiper-item>
							<swiper-item item-id="3">
								<view class="itemhead">轧制过程实时曲线</view>
								<view class="itemMain">
									<view class="itemMain-head">
										<view class="itembox">
											<view class="title">卷号</view>
											<view class="titleinfo">AF11589759</view>
										</view>
										<view class="itembox">
											<view class="title">下一块</view>
											<view class="titleinfo">AF11589759</view>
										</view>
										<view class="itembox wd">
											<view class="title">钢种</view>
											<view class="titleinfo">Q195</view>
										</view>
									</view>
									<view class="itemMain-body scroll-Y">
										<view class="bodyitem midtitle"></view>
										<uni-collapse @change="change">
											<view v-for="(item,index) in curve" :key="index">
												<uni-collapse-item :show-animation="true" :class="(index%2==0)?'' : 'addcol'" :animation="true" :open="index === 0?true:false"
												 :title="item.name">
													<view>
														<uChart :show="canvas" :canvasId="item.id" :chartType="item.chartType" :extraType="item.extraType"
														 :cWidth="cWidth" :cHeight="cHeight" :opts="item.opts" :ref="item.id" />
													</view>
												</uni-collapse-item>
											</view>
										</uni-collapse>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="Roughing">
						<swiper class="Roughingbox" indicator-dots="true" :duration="300" indicator-color="#C1C2C6"
						 indicator-active-color="#134199" @change="swiperItemChange">
							<swiper-item>
								<view class="itemhead">当前板坯的中间坯信息</view>
								<view class="itemMain">
									<view class="itemMain-head">
										<view class="itembox">
											<view class="title">卷号</view>
											<view class="titleinfo">{{matid}}</view>
										</view>
										<view class="itembox">
											<view class="title">下一块</view>
											<view class="titleinfo">{{nextmatid}}</view>
										</view>
										<view class="itembox wd">
											<view class="title">钢种</view>
											<view class="titleinfo">{{steelGrade}}</view>
										</view>
									</view>
									<view class="itemMain-body scroll-Y">
										<view class="bodyitem midtitle">目标值</view>
										<view class="bodyitem" v-for="(item,index) in zhongjianpi" :key="index" :class="(index%2==0)?'' : 'addcol'">
											<view>{{item.name}}</view>
											<view class="titleinfo">{{item.num}}</view>
											<view class="titleunit">{{item.unit}}</view>
										</view>
										<view class="longline"></view>
										<view class="bodyitem midtitle">计算值</view>
										<view class="bodyitem" v-for="(item,index) in jisuanzhi" :key="index" :class="(index%2==0)?'' : 'addcol'">
											<view>{{item.name}}</view>
											<view class="titleinfo">{{item.num}}</view>
											<view class="titleunit">{{item.unit}}</view>
										</view>
									</view>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="itemhead">当前板坯在各架轧机的数据</view>
								<view class="itemMain">
									<view class="itemMain-head">
										<view class="itembox">
											<view class="title">卷号</view>
											<view class="titleinfo">{{matid}}</view>
										</view>
										<view class="itembox">
											<view class="title">下一块</view>
											<view class="titleinfo">{{nextmatid}}</view>
										</view>
										<view class="itembox wd">
											<view class="title">钢种</view>
											<view class="titleinfo">{{steelGrade}}</view>
										</view>
									</view>
									<view class="itemMain-body scroll-Y">
										<view class="bodyitem midtitle"></view>
										<uni-collapse @change="change">
											<view v-for="(arr,i) in banpi" :key="i">
												<uni-collapse-item :show-animation="true" :class="(i%2==0)?'' : 'addcol'" :animation="true" title="机架号:"
												 :value="arr.name" :open="i===0?true:false">
													<view class="midbox">
														<view class="midbox-item" v-for="(item,index) in arr.data" :key="index">
															<view class="itemTitle">{{item.name}}</view>
															<view class="itemInfo">{{item.num}}</view>
														</view>
													</view>
												</uni-collapse-item>
											</view>
										</uni-collapse>
									</view>
								</view>
							</swiper-item>
							<swiper-item item-id="2">
								<view class="itemhead">轧制力/压下率分布图</view>
								<view class="itemMain">
									<view class="itemMain-head">
										<view class="itembox">
											<view class="title">卷号</view>
											<view class="titleinfo">AF11589759</view>
										</view>
										<view class="itembox">
											<view class="title">下一块</view>
											<view class="titleinfo">AF11589759</view>
										</view>
										<view class="itembox wd">
											<view class="title">钢种</view>
											<view class="titleinfo">Q195</view>
										</view>
									</view>
									<view class="itemMain-body scroll-Y">
										<view class="bodyitem midtitle"></view>
										<uni-collapse @change="change">
											<view v-for="(item,index) in yaxia" :key="index">
												<uni-collapse-item :show-animation="true" :class="(index%2==0)?'' : 'addcol'" :animation="true" :open="index === 0?true:false"
												 :title="item.name">
													<view>
														<uChart :show="canvas" :canvasId="item.id" :chartType="item.chartType" :extraType="item.extraType"
														 :cWidth="cWidth" :cHeight="cHeight" :opts="item.opts" :ref="item.id" />
													</view>
												</uni-collapse-item>
											</view>
										</uni-collapse>
									</view>
								</view>
							</swiper-item>
							<swiper-item item-id="3">
								<view class="itemhead">轧制过程实时曲线</view>
								<view class="itemMain">
									<view class="itemMain-head">
										<view class="itembox">
											<view class="title">卷号</view>
											<view class="titleinfo">AF11589759</view>
										</view>
										<view class="itembox">
											<view class="title">下一块</view>
											<view class="titleinfo">AF11589759</view>
										</view>
										<view class="itembox wd">
											<view class="title">钢种</view>
											<view class="titleinfo">Q195</view>
										</view>
									</view>
									<view class="itemMain-body scroll-Y">
										<view class="bodyitem midtitle"></view>
										<!-- <view v-for="(item,index) in jingzhaquxian" :key="index">
											<uChart :show="canvas" :canvasId="item.id" :chartType="item.chartType" :extraType="item.extraType"
											 :cWidth="cWidth" :cHeight="cHeight" :opts="item.opts" :ref="item.id" />
										</view> -->
										<uni-collapse @change="change">
											<view v-for="(item,index) in jingzhaquxian" :key="index">
												<uni-collapse-item :show-animation="true" :class="(index%2==0)?'' : 'addcol'" :animation="true" :open="index === 0?true:false"
												 :title="item.name">
													<view>
														<uChart :show="canvas" :canvasId="item.id" :chartType="item.chartType" :extraType="item.extraType"
														 :cWidth="cWidth" :cHeight="cHeight" :opts="item.opts" :ref="item.id" />
													</view>
												</uni-collapse-item>
											</view>
										</uni-collapse>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</swiper-item>
				<swiper-item class="listItem">
					<view class="Roughing">
						<swiper class="Roughingbox" indicator-dots="true" :duration="300" indicator-color="#C1C2C6"
						 indicator-active-color="#134199">
							<swiper-item>
								<view class="itemhead">板坯信息</view>
								<view class="itemMain">
									<view class="itemMain-head">
										<view class="itembox">
											<view class="title">卷号</view>
											<view class="titleinfo">{{matid}}</view>
										</view>
										<view class="itembox">
											<view class="title">下一块</view>
											<view class="titleinfo">{{nextmatid}}</view>
										</view>
										<view class="itembox wd">
											<view class="title">钢种</view>
											<view class="titleinfo">{{steelGrade}}</view>
										</view>
									</view>
									<view class="itemMain-body scroll-Y">
										<view class="bodyitem midtitle"></view>
										<view class="bodyitem" v-for="(item,index) in cool" :key="index" :class="(index%2==0)?'' : 'addcol'">
											<view class="parameterTitle">{{item.name}}</view>
											<view class="parameterNum">{{item.num}}</view>
											<view class="titleunit">{{item.unit}}</view>
										</view>
									</view>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="itemhead">成品信息</view>
								<view class="itemMain">
									<view class="itemMain-head">
										<view class="itembox">
											<view class="title">卷号</view>
											<view class="titleinfo">{{matid}}</view>
										</view>
										<view class="itembox">
											<view class="title">下一块</view>
											<view class="titleinfo">{{nextmatid}}</view>
										</view>
										<view class="itembox wd">
											<view class="title">钢种</view>
											<view class="titleinfo">{{steelGrade}}</view>
										</view>
									</view>
									<view class="itemMain-body scroll-Y">
										<view class="bodyitem midtitle"></view>
										<view class="bodyitem" v-for="(item,index) in coolTurnoff" :key="index" :class="(index%2==0)?'' : 'addcol'">
											<view class="parameterTitle">{{item.name}}</view>
											<view class="parameterNum">{{item.num}}</view>
											<view class="titleunit">{{item.unit}}</view>
										</view>
									</view>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="itemhead">冷却模式</view>
								<view class="itemMain">
									<view class="itemMain-head">
										<view class="itembox">
											<view class="title">卷号</view>
											<view class="titleinfo">{{matid}}</view>
										</view>
										<view class="itembox">
											<view class="title">下一块</view>
											<view class="titleinfo">{{nextmatid}}</view>
										</view>
										<view class="itembox wd">
											<view class="title">钢种</view>
											<view class="titleinfo">{{steelGrade}}</view>
										</view>
									</view>
									<view class="itemMain-body scroll-Y">
										<view class="bodyitem midtitle"></view>
										<view class="bodyitem" v-for="(item,index) in cooling" :key="index" :class="(index%2==0)?'' : 'addcol'">
											<view class="parameterTitle">{{item.name}}</view>
											<view class="parameterNum">{{item.num}}</view>
											<view class="titleunit">{{item.unit}}</view>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</swiper-item>
				<swiper-item class="listItem">
					<view class="Roughing">
						<swiper class="Roughingbox hide" :duration="300" indicator-color="#C1C2C6" indicator-active-color="#134199">
							<swiper-item>
								<view class="itemhead">卷取过程中的变量数据</view>
								<view class="itemMain">
									<view class="itemMain-head">
										<view class="itembox">
											<view class="title">卷号</view>
											<view class="titleinfo">{{matid}}</view>
										</view>
										<view class="itembox">
											<view class="title">下一块</view>
											<view class="titleinfo">{{nextmatid}}</view>
										</view>
										<view class="itembox wd">
											<view class="title">钢种</view>
											<view class="titleinfo">{{steelGrade}}</view>
										</view>
									</view>
									<view class="xiangao scroll-Y">
										<view class="bodyitem midtitle"></view>
										<view class="bodyitem" v-for="(val,k) in coiling" :key="k" :class="(k%2==0)?'' : 'addcol'">
											<view class="parameterTitle">{{val.name}}</view>
											<view class="parameterNum">{{val.num}}</view>
											<view class="titleunit">{{val.unit}}</view>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		post
	} from "../../lib/Util.js";
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue';
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	import uChart from '@/components/leiqch-ucharts/u-charts.vue';
	var _self;

	export default {
		components: {
			uniIcon,
			uniCollapse,
			uniCollapseItem, 
			uChart
		},
		data() {
			return {
				//试验曲线
				canvas: true,
				clickShow: false,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				// 轧机和中间坯实时信息/
				bar: [],
				//粗轧曲线
				curve: [{
						name: '宽度曲线',
						data: 'canvasArea',
						opts: {},
						chartType: "line",
						extraType: " ",
						id: "canvasArea"
					},
					{
						name: '轧制力曲线',
						data: 'canvasArea1',
						opts: {},
						chartType: "line",
						extraType: " ",
						id: "canvasArea1"
					},
					{
						name: '温度曲线',
						data: 'canvasArea2',
						opts: {},
						chartType: "line",
						extraType: " ",
						id: "canvasArea2"
					},
					{
						name: '辊缝曲线',
						data: 'canvasArea3',
						opts: {},
						chartType: "line",
						extraType: " ",
						id: "canvasArea3"
					},
					{
						name: '主电机电流曲线',
						data: 'canvasArea4',
						opts: {},
						chartType: "line",
						extraType: " ",
						id: "canvasArea4"
					},
					{
						name: '转矩曲线',
						data: 'canvasArea5',
						opts: {},
						chartType: "line",
						extraType: " ",
						id: "canvasArea5"
					}
				],
				//精轧曲线
				jingzhaquxian: [{
						name: '温度曲线',
						data: 'canvasAreaA',
						opts: {},
						chartType: "line",
						extraType: " ",
						id: "canvasAreaA"
					},
					{
						name: '厚度曲线',
						data: 'canvasAreaB',
						opts: {},
						chartType: "line",
						extraType: " ",
						id: "canvasAreaB"
					},
					{
						name: '宽度曲线',
						data: 'canvasAreaC',
						opts: {},
						chartType: "line",
						extraType: " ",
						id: "canvasAreaC"
					},
					{
						name: '凸度曲线',
						data: 'canvasAreaD',
						opts: {},
						chartType: "line",
						extraType: " ",
						id: "canvasAreaD"
					},
					{
						name: '楔形曲线',
						data: 'canvasAreaE',
						opts: {},
						chartType: "line",
						extraType: " ",
						id: "canvasAreaE"
					}
				],
				//压下率曲线
				yaxia: [{
						name: '轧制力 / ton',
						data: 'canvasColumn',
						opts: {},
						chartType: "line",
						extraType: " ",
						id: "canvasColumn"
					},
					{
						name: '压下率 / %',
						data: 'yaxiaLine',
						opts: {},
						chartType: "line",
						extraType: " ",
						id: "yaxiaLine"
					}
				],
				//线图
				arr: [],
				//实时中间信息
				checkCode: 1,
				//二级导航的信息
				listindex: false,
				scrollLeft: 0,
				tabIndex: 0,
				isClickChange: false,
				nextmatid: '---', //下一个钢卷号
				matid: '---', //钢卷号
				steelGrade: '---', //钢种
				//当前板坯
				slab: [{
						name: '板坯厚度',
						unit: '[mm]'
					},
					{
						name: '板坯宽度',
						unit: '[mm]'
					},
					{
						name: '板坯温度',
						unit: '[℃]'
					},
					{
						name: '板坯长度',
						unit: '[m]'
					},
					{
						name: '板坯重量',
						unit: '[Kg]'
					},
					{
						name: '板坯代码',
						unit: '/'
					},
					{
						name: '加热炉号',
						unit: '/'
					}
				],
				tabBars: [{
					name: '粗轧管理',
					id: 0
				}, {
					name: '精轧管理',
					id: 1
				}, {
					name: '层冷管理',
					id: 2
				}, {
					name: '卷取管理',
					id: 3
				}, ],
				//中间坯信息
				midrow: [{
						name: '目标厚度',
						unit: '[mm]',
						num: '---'
					},
					{
						name: '目标宽度',
						unit: '[mm]',
						num: '---'
					},
					{
						name: '目标温度',
						unit: '[℃]',
						num: '---'
					},
					{
						name: '目标长度',
						unit: '[m]',
						num: '---'
					},
				],
				//成品信息
				turnoff: [{
						name: '目标厚度',
						unit: '[mm]',
						num: '---'
					},
					{
						name: '目标宽度',
						unit: '[mm]',
						num: '---'
					},
					{
						name: '目标温度',
						unit: '[℃]',
						num: '---'
					},
					{
						name: '目标长度',
						unit: '[m]',
						num: '---'
					}
				],
				data: [{
						info: '230.000',
					},
					{
						info: '230.000',
					},
					{
						info: '230.000',
					},
					{
						info: '230.000',
					},
					{
						info: '230.000',
					},
					{
						info: '230.000',
					},
					{
						info: '230.000',
					}
				],
				//层冷板信息
				cool: [{
						name: '板坯代码',
						num: '---',
						unit: '/'
					},
					{
						name: '板坯厚度',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '板坯宽度',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '板坯长度',
						num: '---',
						unit: '[m]'
					},
					{
						name: '板坯重量',
						num: '---',
						unit: '[Ton]'
					}
				],
				// 层冷成品信息
				coolTurnoff: [{
						name: '卷取温度',
						num: '---',
						unit: '[℃]'
					},
					{
						name: '终轧温度',
						num: '---',
						unit: '[℃]'
					},
					{
						name: '成品厚度',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '成品宽度',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '成品长度',
						num: '---',
						unit: '[m]'
					}
				],
				//冷却模式
				cooling: [{
						name: '上集管组数',
						num: '---',
						unit: '/'
					},
					{
						name: '下集管组数',
						num: '---',
						unit: '/'
					},
					{
						name: '冷却方向',
						num: '---',
						unit: '/'
					},
					{
						name: '头尾冷却',
						num: '---',
						unit: '/'
					},
					{
						name: '稀疏模式',
						num: '---',
						unit: ''
					},
					{
						name: '头部不冷长度',
						num: '---',
						unit: '[m]'
					},
					{
						name: '尾部不冷长度',
						num: '---',
						unit: '[m]'
					},
					{
						name: '头部微冷长度',
						num: '---',
						unit: '[m]'
					},
					{
						name: '尾部微冷长度',
						num: '---',
						unit: '[m]'
					},
					{
						name: '头部微冷温度',
						num: '---',
						unit: '[℃]'
					},
					{
						name: '尾部微冷温度',
						num: '---',
						unit: '[℃]'
					}
				],
				//卷曲管理
				coiling: [{
						name: '成品厚度',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '成品宽度',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '成品温度',
						num: '---',
						unit: '[℃]'
					},
					{
						name: 'G辊道滞后率',
						num: '---',
						unit: '[%]'
					},
					{
						name: 'G辊道超前率',
						num: '---',
						unit: '[%]'
					},
					{
						name: '侧导板开口度',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '侧导板压力',
						num: '---',
						unit: '[KN]'
					},
					{
						name: '夹送辊开口度',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '夹送辊超前率',
						num: '---',
						unit: '[%]'
					},
					{
						name: '夹送辊压力',
						num: '---',
						unit: '[KN]'
					},
					{
						name: '助卷辊超前率',
						num: '---',
						unit: '[%]'
					},
					{
						name: '助卷辊1#压力',
						num: '---',
						unit: '[KN]'
					},
					{
						name: '助卷辊1#开口度',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '助卷辊2#压力',
						num: '---',
						unit: '[KN]'
					},
					{
						name: '助卷辊2#开口度',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '助卷辊3#压力',
						num: '---',
						unit: '[KN]'
					},
					{
						name: '助卷辊3#开口度',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '卷筒超前率',
						num: '---',
						unit: '[%]'
					},
					{
						name: '卷筒张力',
						num: '---',
						unit: '[KN]'
					},
					{
						name: '减速率',
						num: '---',
						unit: '[m/s/s]'
					},
					{
						name: '减速点',
						num: '---',
						unit: '[m]'
					},
					{
						name: '钢卷直径',
						num: '---',
						unit: '[mm]'
					},
					{
						name: '带钢长度',
						num: '---',
						unit: '[mm]'
					}
				],
				//精轧当前板坯的中间坯信息
				zhongjianpi: [{
						name: '中间坯厚度',
						unit: '[mm]',
						num: '---'
					},
					{
						name: '中间坯宽度',
						unit: '[mm]',
						num: '---'
					},
					{
						name: '中间坯长度',
						unit: '[m]',
						num: '---'
					},
					{
						name: '中间坯温度',
						unit: '[℃]',
						num: '---'
					}
				],
				//精轧当前板坯的中间坯信息计算值
				jisuanzhi: [{
						name: '中间坯厚度',
						unit: '[mm]',
						num: '---'
					},
					{
						name: '中间坯宽度',
						unit: '[mm]',
						num: '---'
					},
					{
						name: '中间坯长度',
						unit: '[m]',
						num: '---'
					},
					{
						name: '中间坯温度',
						unit: '[℃]',
						num: '---'
					}
				],
				//当前板坯在各架轧机的数据
				banpi: []
				//分布柱形图
				//曲线展示
			}
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
		methods: {
			changematid() {
				console.log(1)
			},
			...mapMutations(['logout']),
			tapTab(e) {
				let tabIndex = e.target.dataset.current
				if (this.tabIndex === tabIndex) { //判断重复点击
					return false;
				} else {
					this.tabIndex = tabIndex;
					this.isClickChange = true;
				}
			},
			async changeTab(e) {
				let index = e.target.current;
				if (this.isClickChange) {
					this.tabIndex = index;
					this.isClickChange = false;
					return;
				}
				this.isClickChange = false;
				this.tabIndex = index; //一旦访问data就会出问题
			},
			close() {
				let _self = this;
				uni.showModal({
					title: '退出登录',
					content: '确定要退出吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_self.logout();
							// #ifdef APP-PLUS  
							plus.runtime.quit();
							// #endif 
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			changepass() {
				uni.navigateTo({
					url: '/pages/changepass/changepass'
				})
			},
			collapse(id) {
				this.checkCode = id
				this.listindex = !this.listindex
			},
			getinit() {
				this.getmodelinfo()
				//获得层冷数据
				this.getcool()
				//获得卷取数据
				this.getcoiling()
				//获取精轧数据
				this.jingzha()
			},
			swiperItemChange(e) {
				let _self = this
				if(e.target.currentItemId === '2') {
					uni.showLoading({
						title: '加载中',
						mask: false,
						success() {
							_self.getcloumn()
						}
					})
					setTimeout(()=>{
						uni.hideLoading()
					},1000)
				}
				if(e.target.currentItemId === '3') {
					uni.showLoading({
						title: '加载中',
						mask: false,
						success() {
							_self.getjingzhaquxian()
							_self.gethoudu()
							_self.getkuandu()
							_self.gettudu()
							_self.getxiexing()
						}
					})
					setTimeout(()=>{
						uni.hideLoading()
					},1000)
				}
			},
			cuzhaChange(e) {
				let _self = this
				if(e.target.currentItemId === '3') {
					uni.showLoading({
						title: '加载中',
						mask: false,
						success() {
							//获取粗轧数据
							_self.getServerData()
						}
					})
					setTimeout(()=>{
						uni.hideLoading()
					},1000)
				}
			},
			/**
			 * @description:粗轧曲线图
			 */
			async getServerData() {
				let data = {
					"tags": [{
						"name": "R1Curve",
						"ts": "1"
					}],
					"msgs": []
				}
				let data1 = {
					"tags": [{
						"name": "RDTCurve",
						"ts": "1"
					}],
					"msgs": []
				}
				let res = await post('webservice/getHmiData', data)
				let rep = await post('webservice/getHmiData', data1)
				let resultA = rep.data.tagList[0].dataList
				let result = res.data.tagList[0].dataList
				let bendforce = []  //宽度曲线
				let current = []    //主电机电流
				let torque = []     //转矩曲线
				let force = []      //轧制力
				let gap = []        //辊缝参数
				let Tem = []          //温度曲线
				let TX = []         //温度横坐标
				let X = []          //横坐标
				for (let val in result) {
					bendforce.push(result[val].bendforce)
					current.push(result[val].current)
					torque.push(result[val].torque)
					force.push(result[val].force)
					gap.push(result[val].gap)
					X.push(result[val].x)
				}
				for (let val in resultA) {
					Tem.push(resultA[val].T)
					TX.push(resultA[val].x)
				}
				this.curve[0].opts={
					labelCount:20,
					dataLabel:false,
					dataPointShape:false,
					categories: X,
					series: [{
						name: '宽度',
						data: bendforce
					}]
				}
				this.$refs.canvasArea[0].changeData('canvasArea',this.curve[0].opts)
				this.curve[1].opts={
					labelCount:20,
					dataLabel:false,
					dataPointShape:false,
					categories: X,
					series: [{
						name: '轧制力',
						data: force
					}]
				}
				this.$refs.canvasArea1[0].changeData('canvasArea1',this.curve[1].opts)
				this.curve[2].opts={
					labelCount:80,
					dataLabel:false,
					dataPointShape:false,
					categories: TX,
					series: [{
						name: '温度',
						data: Tem
					}]
				}
				this.$refs.canvasArea2[0].changeData('canvasArea2',this.curve[2].opts)
				this.curve[3].opts={
					labelCount:20,
					dataLabel:false,
					dataPointShape:false,
					categories: X,
					series: [{
						name: '辊缝',
						data: gap
					}]
				}
				this.$refs.canvasArea3[0].changeData('canvasArea3',this.curve[3].opts)
				this.curve[4].opts={
					labelCount:20,
					dataLabel:false,
					dataPointShape:false,
					categories: X,
					series: [{
						name: '主机电流',
						data: current
					}]
				}
				this.$refs.canvasArea4[0].changeData('canvasArea4',this.curve[4].opts)
				this.curve[5].opts={
					labelCount:20,
					dataLabel:false,
					dataPointShape:false,
					categories: X,
					series: [{
						name: '转矩参数',
						data: torque
					}]
				}
				this.$refs.canvasArea5[0].changeData('canvasArea5',this.curve[5].opts)
			},
			/**
			 * 精轧温度/厚度/宽度/凸度/楔形曲线图
			 */
			async getjingzhaquxian() {
				let data = {
					    "tags": [
					        {
					            "name": "FETCurve",
					            "ts":"1"
					        }
					    ],
					    "msgs": []
				}
				let res = await post('webservice/getHmiData',data)
				let result = res.data.tagList[0].dataList
				let fetcurveX = Array.from(result, o =>o.x)
				let fetcurve = Array.from(result, o =>o.T)
				this.jingzhaquxian[0].opts = {
					labelCount:20,
					dataLabel:false,
					dataPointShape:false,
					categories: fetcurveX,
					series: [{
						name: '温度',
						data: fetcurve
					}]
				}
				this.$refs.canvasAreaA[0].changeData('canvasAreaA', this.jingzhaquxian[0].opts);
			},
			async gethoudu(){
				let data = {
					    "tags": [
					        {
					            "name": "FDHCurve",
					            "ts":"1"
					        }
					    ],
					    "msgs": []
				}
				let res = await post('webservice/getHmiData',data)
				let result = res.data.tagList[0].dataList
				let FDHCurveX = Array.from(result, o=>o.x)
				let FDHCurve = Array.from(result, o=>o.H)
				this.jingzhaquxian[1].opts = {
					labelCount:20,
					dataLabel:false,
					dataPointShape:false,
					categories: FDHCurveX,
					series: [{
						name: '厚度',
						data: FDHCurve
					}]
				}
				this.$refs.canvasAreaB[0].changeData('canvasAreaB', this.jingzhaquxian[1].opts);
			},
			async getkuandu(){
				let data = {
					    "tags": [
					        {
					            "name": "FDWCurve",
					            "ts":"1"
					        }
					    ],
					    "msgs": []
				}
				let res = await post('webservice/getHmiData',data)
				let result = res.data.tagList[0].dataList
				let FDWCurveX = Array.from(result, o=>o.x)
				let FDWCurve = Array.from(result, o=>o.W)
				this.jingzhaquxian[2].opts = {
					labelCount:20,
					dataLabel:false,
					dataPointShape:false,
					categories: FDWCurveX,
					series: [{
						name: '宽度',
						data: FDWCurve
					}]
				}
				this.$refs.canvasAreaC[0].changeData('canvasAreaC', this.jingzhaquxian[2].opts);
			},
			async gettudu(){
				let data = {
					    "tags": [
					        {
					            "name": "FDCCurve",
					            "ts":"1"
					        }
					    ],
					    "msgs": []
				}
				let res = await post('webservice/getHmiData',data)
				let result = res.data.tagList[0].dataList
				let FDCCurveX = Array.from(result, o=>o.x)
				let FDCCurve = Array.from(result, o=>o.C)
				this.jingzhaquxian[3].opts = {
					labelCount:20,
					dataLabel:false,
					dataPointShape:false,
					categories: FDCCurveX,
					series: [{
						name: '凸度',
						data: FDCCurve
					}]
				}
				this.$refs.canvasAreaD[0].changeData('canvasAreaD', this.jingzhaquxian[3].opts);
			},
			async getxiexing(){
				let data = {
					    "tags": [
					        {
					            "name": "WEDGECurve",
					            "ts":"1"
					        }
					    ],
					    "msgs": []
				}
				let res = await post('webservice/getHmiData',data)
				let result = res.data.tagList[0].dataList
				let WEDGECurveX = Array.from(result, o=>o.x)
				let WEDGECurve = Array.from(result, o=>o.W)
				this.jingzhaquxian[4].opts = {
					labelCount:20,
					dataLabel:false,
					dataPointShape:false,
					categories: WEDGECurveX,
					series: [{
						name: '楔形',
						data: WEDGECurve
					}]
				}
				this.$refs.canvasAreaE[0].changeData('canvasAreaE', this.jingzhaquxian[4].opts);
			},
			/**
			 * @description:精轧数据的压下率与轧制力
			 */
			async getcloumn() {
				let data = {
					    "tags": [
					        {
					            "name": "FMSetStd",
					            "ts":"1"
					        }
					    ],
					    "msgs": []
				}
				let res = await post('webservice/getHmiData',data)
				let result = res.data.tagList[0].dataList
				let X = Array.from( result, o =>o.StandNo)
				let force = Array.from( result, o =>o.Force)
				let loadratio = Array.from( result, o =>o.LoadRatio)
				this.yaxia[0].opts = {
					categories: X,
					series: [{
						name: '轧制力',
						data: force
					}]
				}
				this.$refs.canvasColumn[0].changeData('canvasColumn', this.yaxia[0].opts)
				this.yaxia[1].opts = {
					categories: X,
					series: [{
						name: '压下率',
						data: loadratio
					}]
				}
				this.$refs.yaxiaLine[0].changeData('yaxiaLine', this.yaxia[1].opts)
				console.log(this.$refs)
			},
			//中间信息折叠面板的开启
			change() {
				console.log(111)
			},
			async getmodelinfo() {
				let data = {
					"tags": [{
						"name": "RECROLLLIST",
						"ts": "0"
					}, {
						"name": "RMSetPass",
						"ts": "0"
					}],
					"msgs": []
				}
				let res = await post('webservice/getHmiData', data)
				this.nextmatid = res.data.tagList[0].dataList[0].MATID;
				this.matid = res.data.tagList[1].dataList[0].MatId;
				this.steelGrade = res.data.tagList[1].dataList[0].SteelGrade;
				// 当前板坯信息
				this.slab[0].num = res.data.tagList[1].dataList[0].SlabThkRaw;
				this.slab[1].num = res.data.tagList[1].dataList[0].SlabWidRaw;
				this.slab[2].num = res.data.tagList[1].dataList[0].SlabTemp;
				this.slab[3].num = res.data.tagList[1].dataList[0].SlabLenRaw;
				this.slab[4].num = res.data.tagList[1].dataList[0].SlabWet;
				this.slab[5].num = res.data.tagList[1].dataList[0].QualityCode;
				this.slab[6].num = res.data.tagList[1].dataList[0].FceNo;
				//中间坯信息
				this.midrow[0].num = res.data.tagList[1].dataList[0].BarTrgThk;
				this.midrow[1].num = res.data.tagList[1].dataList[0].BarTrgWid;
				this.midrow[2].num = res.data.tagList[1].dataList[0].BarTrgTemp;
				this.midrow[3].num = res.data.tagList[1].dataList[0].BarTrgLen;
				//成品信息
				this.turnoff[0].num = res.data.tagList[1].dataList[0].StripThk;
				this.turnoff[1].num = res.data.tagList[1].dataList[0].StripWid;
				this.turnoff[2].num = res.data.tagList[1].dataList[0].StripTemp;
				this.turnoff[3].num = res.data.tagList[1].dataList[0].CoilLen;
				//轧辊信息
				let arr = [];
				for (let i = 0; i < res.data.tagList[1].dataList.length; i++) {
					arr.push({
						name: res.data.tagList[1].dataList[i].PassNo,
						data: [{
								name: 'R1辊缝',
								num: res.data.tagList[1].dataList[i].R1Gap
							},
							{
								name: 'E1辊缝',
								num: res.data.tagList[1].dataList[i].E1Gap,
							},
							{
								name: '出口厚度',
								num: res.data.tagList[1].dataList[i].ExitThk,
							},
							{
								name: '压下量',
								num: res.data.tagList[1].dataList[i].R1Load,
							},
							{
								name: '压下率',
								num: res.data.tagList[1].dataList[i].R1LoadRatio,
							},
							{
								name: '轧制力',
								num: res.data.tagList[1].dataList[i].R1Force,
							},
							{
								name: '轧制功率',
								num: res.data.tagList[1].dataList[i].R1Power,
							},
							{
								name: '运行速度',
								num: res.data.tagList[1].dataList[i].R1RunSpeed,
							},
							{
								name: '抛出速度',
								num: res.data.tagList[1].dataList[i].R1OutSpeed,
							},
							{
								name: '轧制温度',
								num: res.data.tagList[1].dataList[i].ExitTemp,
							},
							{
								name: 'E1测压量',
								num: res.data.tagList[1].dataList[i].E1Load,
							},
							{
								name: 'E1轧制力',
								num: res.data.tagList[1].dataList[i].E1Force,
							},
							{
								name: '入口侧导',
								num: res.data.tagList[1].dataList[i].EntrySideGuide,
							},
							{
								name: '出口侧导',
								num: res.data.tagList[1].dataList[i].ExitSideGuide,
							},
							{
								name: '轧后长度',
								num: res.data.tagList[1].dataList[i].R1ExitLen,
							},
							{
								name: '咬入速度',
								num: res.data.tagList[1].dataList[i].R1InSpeed,
							}
						]
					})
				}
				this.bar = arr
				//实时曲线

			},
			//层冷
			async getcool() {
				let data = {
					"tags": [{
						"name": "RECROLLLIST",
						"ts": "0"
					}, {
						"name": "CTCSet",
						"ts": "0"
					}],
					"msgs": []
				};
				let res = await post('webservice/getHmiData', data);
				let result = res.data.tagList[1].dataList[0];
				this.cool[0].num = result.QualityCode;
				this.cool[1].num = result.SlabThkRaw;
				this.cool[2].num = result.SlabWidRaw;
				this.cool[3].num = result.SlabLenRaw;
				this.cool[4].num = result.SlabWet;
				//层冷成品信息
				this.coolTurnoff[0].num = result.CoilTemp;
				this.coolTurnoff[1].num = result.StripTemp;
				this.coolTurnoff[2].num = result.StripThkRaw;
				this.coolTurnoff[3].num = result.StripWidRaw;
				this.coolTurnoff[4].num = result.CoilLen;
				//冷却模式
				this.cooling[0].num = result.ValveNumUp;
				this.cooling[1].num = result.ValveNumDn;
				if (result.CoolDirect === "1") {
					this.cooling[2].num = "前向"
				} else if (result.CoolDirect === "2") {
					this.cooling[2].num = "后向"
				}
				// 头尾冷却
				if (result.HeadTailPro === "1") {
					this.cooling[3].num = "全长冷却"
				}
				if (result.HeadTailPro === "2") {
					this.cooling[3].num = "头部不冷"
				}
				if (result.HeadTailPro === "3") {
					this.cooling[3].num = "尾部不冷"
				}
				if (result.HeadTailPro === "4") {
					this.cooling[3].num = "头尾不冷"
				}
				if (result.HeadTailPro === "5") {
					this.cooling[3].num = "头部微冷"
				}
				if (result.HeadTailPro === "6") {
					this.cooling[3].num = "尾部微冷"
				}
				if (result.HeadTailPro === "7") {
					this.cooling[3].num = "头尾微冷"
				}
				/*稀疏模式*/
				if (result.ValvePattern === "1") {
					this.cooling[4].num = "1/4模式"
				}
				if (result.ValvePattern === "2") {
					this.cooling[4].num = "2/4模式"
				}
				if (result.ValvePattern === "3") {
					this.cooling[4].num = "3/4模式"
				}
				if (result.ValvePattern === "4") {
					this.cooling[4].num = "4/4模式"
				}

				function toDecimal(x) {
					var f = parseFloat(x);
					if (isNaN(f)) {
						return;
					}
					f = Math.round(x * 100) / 100;
					return f;
				}
				this.cooling[5].num = toDecimal(result.HUnCoolLen);
				this.cooling[6].num = toDecimal(result.TUnCoolLen);
				this.cooling[7].num = toDecimal(result.HMicroCoolLen);
				this.cooling[8].num = toDecimal(result.TMicroCoolLen);
				this.cooling[9].num = toDecimal(result.HMicroCoolTemp);
				this.cooling[10].num = toDecimal(result.TMicroCoolTemp);
			},
			//卷取管理
			async getcoiling() {
				let data = {
					"tags": [{
						"name": "RECROLLLIST",
						"ts": "0"
					}, {
						"name": "CTCSet",
						"ts": "0"
					}, {
						"name": "DCSet",
						"ts": "0"
					}],
					"msgs": []
				};
				let res = await post('webservice/getHmiData', data);
				let result = res.data.tagList[2].dataList[0];
				this.coiling[0].num = result.CThk;
				this.coiling[1].num = result.CWid;
				this.coiling[2].num = result.DCTemp;
				this.coiling[3].num = result.GLag;
				this.coiling[4].num = result.GLead;
				this.coiling[5].num = result.SGOpen;
				this.coiling[6].num = result.SGPress;
				this.coiling[7].num = result.PROpen;
				this.coiling[8].num = result.PRLead;
				this.coiling[9].num = result.PRPress;
				this.coiling[10].num = result.WRLead;
				this.coiling[11].num = result.WR1Press;
				this.coiling[12].num = result.WR1Open;
				this.coiling[13].num = result.WR2Press;
				this.coiling[14].num = result.WR2Open;
				this.coiling[15].num = result.WR3Press;
				this.coiling[16].num = result.WR3Open;
				this.coiling[17].num = result.MDLead;
				this.coiling[18].num = result.MDTens;
				this.coiling[19].num = result.DesSpeed;
				this.coiling[20].num = result.DesDot;
				this.coiling[21].num = result.CoilDia;
				this.coiling[22].num = result.CoilTotLng;
			},
			async jingzha() {
				let data = {
					"tags": [{
						"name": "RECROLLLIST",
						"ts": "0"
					}, {
						"name": "FMSetStd",
						"ts": "0"
					}],
					"msgs": []
				};
				let res = await post('webservice/getHmiData', data);
				let result = res.data.tagList[1].dataList[0]
				//中间坯信息
				this.zhongjianpi[0].num = result.BarTrgThk;
				this.zhongjianpi[1].num = result.BarTrgWid;
				this.zhongjianpi[2].num = result.BarTrgLen;
				this.zhongjianpi[3].num = result.BarTrgTemp;
				//计算
				this.jisuanzhi[0].num = result.BarActThk;
				this.jisuanzhi[1].num = result.BarActWid;
				this.jisuanzhi[2].num = result.BarActLen;
				this.jisuanzhi[3].num = result.BarActTemp;
				let arr = [];
				for (let i = 0; i < res.data.tagList[1].dataList.length; i++) {
					arr.push({
						name: res.data.tagList[1].dataList[i].StandNo,
						data: [{
								name: '入口厚度',
								num: res.data.tagList[1].dataList[i].EntryThk
							},
							{
								name: '出口厚度',
								num: res.data.tagList[1].dataList[i].ExitThk,
							},
							{
								name: '轧机辊缝',
								num: res.data.tagList[1].dataList[i].Gap,
							},
							{
								name: '轧制速度',
								num: res.data.tagList[1].dataList[i].ThreadSpd,
							},
							{
								name: '出口温度',
								num: res.data.tagList[1].dataList[i].RollTemp,
							},
							{
								name: '轧制力',
								num: res.data.tagList[1].dataList[i].Force,
							},
							{
								name: '压下率',
								num: res.data.tagList[1].dataList[i].LoadRatio,
							},
							{
								name: '弯辊力',
								num: res.data.tagList[1].dataList[i].BendForce,
							},
							{
								name: '窜辊量',
								num: res.data.tagList[1].dataList[i].SFTS,
							},
							{
								name: '轧机功率',
								num: res.data.tagList[1].dataList[i].Power,
							},
							{
								name: '侧导开度',
								num: res.data.tagList[1].dataList[i].SideGuide,
							},
							{
								name: '活套张力',
								num: res.data.tagList[1].dataList[i].LoopTen,
							},
							{
								name: '活套高度',
								num: res.data.tagList[1].dataList[i].LoopPos,
							},
							{
								name: '前滑系数',
								num: res.data.tagList[1].dataList[i].ForwardSlip,
							}
						]
					})
				}
				this.banpi = arr;
			}

		},
		onNavigationBarButtonTap(e) {
			if (e.float == "right") {
				this.clickShow = !this.clickShow;
			}
		},
		watch: {
			hasLogin() {
				if (!this.$store.state.hasLogin) {
					uni.reLaunch({
						url: '../login/login',
					});
				}
			}
		},
		onLoad() {
			this.curve.forEach(val => {
				val.opts = {
					dataLabel:false,
					itemCount: 9,
					categories: ['80', '120', '160', '200', '240', '280', '320', '360'],
					series: [{
						name: val.name,
						data: [0,0,0,0,0,0,0,0]
					}]
				}
			})
			this.yaxia.forEach(val => {
				val.opts = {
					categories: ['F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7'],
					series: [{
						name: val.name,
						data: [0, 0, 0, 0, 0, 0, 0]
					}]
				}
			})
			this.jingzhaquxian.forEach(val => {
				val.opts = {
					fixed: 2,
					labelCount:20,
					dataLabel:false,
					dataPointShape:false,
					categories: [0, 40, 80, 120, 160, 200, 240, 280, 320, 360, 400, 440, 480],
					series: [{
						name: val.name,
						data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
					}]
				}
			})
			_self = this;
			this.cWidth = uni.upx2px(730);
			this.cHeight = uni.upx2px(500);
			_self.getinit();
			if (!uni.getStorageSync('hasLogin')) {
				uni.showModal({
					title: '未登录',
					content: '您未登录，需要登录后才能继续',
					showCancel: !this.forcedLogin,
					success: (res) => {
						if (res.confirm) {
							if (this.forcedLogin) {
								uni.reLaunch({
									url: '../login/login'
								});
							} else {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						}
					}
				});
			}
		},
	}
</script>

<style>
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 730upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
